<template>
  <div class="container-table">
    <UploadExecl>
      <el-button type="primary" link class="execl">导入execl文件</el-button>
      <!-- <span class="execl">导入execl文件</span> -->
    </UploadExecl>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="添加一级类别" name="first">
        <el-form
          :model="data"
          label-width="7rem"
          ref="ruleFormRef1"
          :rules="rules1"
        >
          <el-form-item label="一级商品类名" prop="category_oneName">
            <el-input
              v-model="data.category_oneName"
              style="width: 15rem"
              size="large"
              placeholder="请输入一级类别"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 15rem"
              type="primary"
              size="large"
              @click="submitOne(ruleFormRef1)"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="添加二级类别" name="second">
        <el-form
          :model="data.two"
          label-width="7rem"
          ref="ruleFormRef2"
          :rules="rules2"
        >
          <el-form-item label="选择一级类别" prop="category_oneId">
            <el-select
              v-model="data.two.category_oneId"
              placeholder="请选择一级类别"
              size="large"
              style="width: 15rem"
            >
              <el-option
                v-for="one in goodsSearch.oneTypeList"
                :key="one.category_oneId"
                :label="one.category_oneName"
                :value="one.category_oneId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级商品类名" prop="category_twoName">
            <el-input
              v-model="data.two.category_twoName"
              style="width: 15rem"
              size="large"
              placeholder="请输入二级类别"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 15rem"
              type="primary"
              size="large"
              @click="submitTwo(ruleFormRef2)"
              >添加</el-button
            >
          </el-form-item>
        </el-form></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { reqInsertOneType, reqInsertTwoType } from '@/api/goods'
import { ElMessage } from 'element-plus'
import UploadExecl from '@/components/UploadExecl'
const activeName = ref('first')
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
const data = reactive({
  category_oneName: '',
  two: {
    category_oneId: '',
    category_twoName: ''
  },
  rules1: {
    category_oneName: [
      { required: true, message: '一级商品类名不能为空', trigger: 'blur' }
    ]
  },
  rules2: {
    category_oneId: [
      { required: true, message: '一级类别不能为空', trigger: 'change' }
    ],
    category_twoName: [
      { required: true, message: '二级商品类名不能为空', trigger: 'blur' }
    ]
  }
})
const { rules1, rules2 } = data
const store = useStore()
const { dispatch, getters } = store
// 添加一级按钮
const submitOne = async (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const result = await reqInsertOneType({
        category_oneName: data.category_oneName
      })
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        data.category_oneName = ''
        dispatch('goods/getAllTypeList')
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
// 添加二级按钮
const submitTwo = async (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const result = await reqInsertTwoType(data.two)
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
        data.two.category_oneId = ''
        data.two.category_twoName = ''
        dispatch('goods/getAllTypeList')
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
    } else {
      return false
    }
  })
}
const goodsSearch = computed(() => getters.goodsSearch)
</script>

<style lang="scss" scoped>
.container-table {
  position: relative;
  .execl {
    z-index: 2;
    position: absolute;
    right: 1rem;
    top: 2rem;
  }
  .el-tabs {
    margin-left: 1rem;
    .el-form {
      margin-top: 1rem;
      margin-left: 1rem;
    }
  }
}
</style>
